<template class="body">
	
	<view class="page-container">
		<view class="page-background"></view>
		<view class="uni-padding-wrap uni-common-mt">
			
			<view class="uni-flex uni-column info-container">
				<view  class="avatar-container uni-flex uni-row">
					<image src="../../../static/img/album/avatar.svg" class="avatar uni-align-center"></image>
				</view>
				<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
					<!-- <view class="user-name">王秀凤</view> -->
					<view class="user-name">Jane</view>
				</view>
				
				<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
					<!-- <view class="user-hometown">江苏南京</view> -->
					<view class="user-hometown">San francisco</view>
				</view>
				
				<view class="uni-flex intro-container gradient-border-box" >
					<view class="intro">
						Jane01, She is Jane’s digital life, created by everlasting AI, based on the ButterFly Model, using data of Jane. She was borned in 1995, love music.  
					</view>
				</view>
				
				<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
					<view class="uni-flex" style="flex:1; -webkit-justify-content: center;justify-content: center;">
						<view class="btn-container">
							<button class="chat-btn" @click="goToPage('/pages/chat/chat')">
								和TA聊天
							</button>
						</view>
					</view>
					
					<view class="uni-flex" style="flex:1; -webkit-justify-content: center;justify-content: center;">
						<view class="btn-container">
							<button class="evolve-btn">
								让TA进化
							</button>
						</view>
					</view>
				</view>
				
			</view>
			
	
		
			
		    
			
			
		</view>
	</view>
	
    
</template>

<script>
	import {server_url} from '@/web_config/config.js'
	
    export default {
        data() {
            return {
				introduction:""
				
            }
        },
        onLoad() {
			
        },
		mounted() {
			console.log("mount好了")
		},
        methods: {
			
			goToPage(url) {
				console.log("点了"+url);
				if (!url) return;
				console.log("点了3"+url);
				uni.navigateTo({
					url
				});
			}
            
        }
    }
</script>

<style>
@import "../../../common/uni.css";


.intro-container {
	margin-top: 50rpx;
	height: 500rpx;
	/* width: 200rpx; */
	border: 50rpx solid;

/* background-image: linear-gradient(to bottom, purple, white); */

	/* text-align: center; */
	/* border-image-source: linear-gradient(180deg, rgba(142, 29, 232, 0.5) 0%, rgba(108, 0, 193, 0.342755) 48.81%, rgba(233, 223, 233, 0.5) 100%); */
	
	/* border-image-source: linear-gradient(rgba(142, 29, 232, 0.5) 0%, rgba(108, 0, 193, 0.342755) 48.81%, rgba(233, 223, 233, 0.5) 100%); */
	
	/* border-image-source: linear-gradient(to bottom, rgba(142, 29, 232, 0.5) 0%, rgba(108, 0, 193, 0.342755) 48.81%, rgba(233, 223, 233, 0.5) 100%); */
	
	border-image-source: linear-gradient(to bottom, rgba(142, 29, 232, 0.5), rgba(143, 64, 233, 0.5));
	
	.intro {
		margin-top: 50rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
	}

	/* background-color: red; */
}


.gradient-border-box {
  /* 元素的尺寸 */
 position: relative;
  width: 100%;
  height: 500rpx;
 
  /* 创建渐变背景 */
  /* background: linear-gradient(to bottom, rgba(142, 29, 232, 0.5), rgba(233, 223, 233, 0.5)); */
  background-color: white;
  /* 边框大小和颜色 */
  border: 5px solid transparent; /* 边框颜色设置为透明，以便看到渐变背景 */
  
  /* 边框半径，如果需要圆角边框 */
  border-radius: 10px;
  
  /* 确保渐变背景覆盖整个元素，包括边框区域 */
  background-clip: padding-box, border-box;
}

.gradient-border-box::before {
  /* 伪元素尺寸与父元素一致 */
  content: '';
  position: absolute;
  top: -5px; /* 负值与边框宽度一致，以覆盖边框 */
  left: -5px;
  right: -5px;
  bottom: -5px;
  
  /* 应用相同的渐变背景 */
  background: linear-gradient(to bottom, rgba(142, 29, 232, 0.5), rgba(233, 223, 233, 0.5));
  
  /* 将背景裁剪到边框区域 */
  background-clip: border-box;
  
  /* 确保伪元素位于元素后面 */
  z-index: -1;
  
  /* 边框半径，与父元素一致 */
  border-radius: 10px;
}



.info-container {
	/* margin-top: 100rpx; */
}

.page-background {
	/* background-image: url(@/static/img/album/background.jpg); */
	background-size: cover;
	background-position: center;
	  background-attachment: fixed;
	  height: 100%;
	  width: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: -1;
}	

.avatar-container {
	margin-top:10rpx;
	width: 100%;
	height: 240rpx;
	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	
}

.avatar {
	height: 250rpx;
	width: 250rpx;
	border-radius: 50%;
	/* margin-bottom: -20rpx; */
	/* align-content: center;
	justify-content: center; */
	object-fit: contain; /* 保持图片比例，确保图片完全显示在容器内 */
	
}

.user-name {
	margin-top: 30rpx;
	/* font: Comfortaa; */
	font-size: 50rpx;
	line-height: 80rpx;
	/* color: rebeccapurple; */
}

.user-hometown {
	font-size: 35rpx;
	line-height: 80rpx;
}


.btn-container {
	/* background-color:red; */
	margin-top: 100rpx;
	width: 250rpx;
}

.chat-btn {
	/* background-color:red; */
	background: linear-gradient(90deg, #D80FF9 0%, #9D0AB5 100%);
	color: rgba(255, 255, 255, 1);

}

.evolve-btn {
	background-color: rgba(217, 217, 217, 1);
	color: rgba(255, 255, 255, 1);
}

.stage-item {
	background: rgba(217, 217, 217, 1);


	border-radius: 30rpx;
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	height: 200rpx;
	
	
	.stage-head-text {
		/* 童年 1995 */
		
		margin-top: 35rpx;
		
		
		font-family: 'Comfortaa';
		font-style: normal;
		font-weight: 600;
		font-size: 36rpx;
		
		
		text-align: center;
		justify-items: center;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		
		color: #000000;
		

	}
	
	.stage-cover-img {
		width: 100%;
		height: 120rpx;
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
		justify-content: center; align-items: center;
	}
}







/* 设置页面的背景图片，并固定背景 */
.body {
  background-image: url('../../../static/logo.png');
  background-size: cover; /* 背景图片覆盖整个页面 */
  background-attachment: fixed; /* 背景图片固定，不随页面滚动 */
  background-position: center center; /* 背景图片居中显示 */
}

/* 添加模糊效果 */
.body {
  filter: blur(10px); /* 根据需要调整模糊程度 */
}

</style>
